<template>
    <!-- 分类导航 -->
  <view class="section cat">
    <scroll-view class="scroll-view_H" scroll-x="true">
     
        <block v-if="catList" v-for="(item,index) in catList" :key="index">
          <view hover-class="hoverc" @click="handleChange(item.catid)" v-bind:class="[currentCatid === item.catid ? 'selected scroll-view-item_H' : 'scroll-view-item_H']" id="green">{{item.catname}} </view>
        </block>
 
    </scroll-view>
  </view>
</template>
<script>
export default {
  computed: {
    currentCatid() {
      return this.$store.state.currentCatid;
    }
  },
  props: {
    catList: Array
  },
  methods: {
    handleChange(catid) {
      this.$store.state.more = false;
      this.$store.state.currentCatid = catid
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../styles/varibles.scss";
.hoverc {
  background: $hoverBg;
}
.cat {
  position: relative;
  height: 100rpx;
  background: $bg;
  z-index: 99;
  .scroll-view_H {
    position: fixed;
    background: $bg;
    width: 100%;
    white-space: nowrap;
    font-size: $fontSize3;
    line-height: 100rpx;
    .selected {
      color: $fontColor;
      font-weight: bold;
      border-bottom: 5rpx solid $fontColor;
    }
    .scroll-view-item_H {
      padding: 0 20rpx;
      text-align: center;
      display: inline-block;
    }
  }
}
</style>

